<template>
  <div>
    <aside
      style="
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      "
    >
      <div>
        门店选择：
        <el-select
          v-model="shop_id"
          placeholder="请选择门店"
          @change="changeShop"
        >
          <el-option
            v-for="item in shopList"
            :key="item._id"
            :label="item.shopName"
            :value="item._id"
          >
          </el-option>
        </el-select>
      </div>
      <el-button
        type="primary"
        size="default"
        icon="el-icon-plus"
        @click="dialogFormVisible = true"
        >添加</el-button
      >
    </aside>
    <el-table :data="carList" border stripe>
      <el-table-column fixed label="序号" width="80px" align="center">
        <template v-slot="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="车牌号" prop="license_number"> </el-table-column>
      <el-table-column label="种类">
        <template slot-scope="{ row }">
          {{ row.category_id.name }}
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="{ row }">
          {{ row.type_id.carName }}
        </template>
      </el-table-column>
      <el-table-column label="是否在租借">
        <template slot-scope="{ row }">
          {{ row.is_rend ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="{ row }">
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            @click="editData(row)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteItem(row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="carForm._id ? '修改车信息' : '添加新车'"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form :model="carForm" ref="carForm" style="width: 80%">
        <el-form-item label="车牌号" label-width="100px" prop="tel">
          <el-input
            v-model="carForm.license_number"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="门店" label-width="100px">
          <el-select v-model="carForm.shop_id" placeholder="请选择门店">
            <el-option
              v-for="item in shopList"
              :key="item._id"
              :label="item.shopName"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="种类" label-width="100px">
          <el-select v-model="carForm.category_id" placeholder="请选择种类">
            <el-option
              v-for="item in categoryList"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" label-width="100px">
          <el-select v-model="carForm.type_id" placeholder="请选择类型">
            <el-option
              v-for="item in typeList"
              :key="item._id"
              :label="item.carName"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="submitData">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Car",
  data() {
    return {
      dialogFormVisible: false,
      shop_id: "",
      carList: [],
      shopList: [],
      categoryList: [],
      typeList: [],
      carForm: {
        license_number: "",
        shop_id: "",
        category_id: "",
        type_id: "",
      },
    };
  },
  mounted() {
    this._initData();
  },
  methods: {
    async getShopList() {
      let ret = await reqShopList();
      if (ret.code == 200) this.shopList = ret.data;
    },
    async getCategoryList() {
      let ret = await reqCategoryList();
      if (ret.code == 200) this.categoryList = ret.data;
    },
    async getTypeList() {
      let ret = await reqType();
      if (ret.code == 200) this.typeList = ret.data;
    },
    _initData() {
      this.getShopList();
      this.getCategoryList();
      this.getTypeList();
    },
    async changeShop(shop_id) {
      let ret = await reqCarListByShop(shop_id);
      if (ret.code == 200) this.carList = ret.data;
    },
    editData(item) {
      this.dialogFormVisible = true;
      let data = { ...item };
      data.category_id = item.category_id._id;
      data.type_id = item.type_id._id;
      this.carForm = { ...data };
    },
    // 点击取消按钮
    cancelDialog() {
      this.carForm = {
        license_number: "",
        shop_id: "",
        category_id: "",
        type_id: "",
      };
      this.carForm._id = undefined;
      this.dialogFormVisible = false;
    },
    // 点击叉号关闭
    handleClose(done) {
      this.$confirm("确认关闭？", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((_) => {
          this.cancelDialog();
          done();
        })
        .catch((_) => {});
    },
    async submitData() {
      let ret = await reqAddOrUpdateCar(this.carForm);
      let tip = this.carForm._id ? "修改成功" : "添加成功";
      if (ret.code == 200) {
        if (this.shop_id) this.changeShop(this.shop_id);
        this.$message.success(tip);
        this.cancelDialog();
      }
    },
    deleteItem(row) {
      this.$confirm(`你确定删除车牌号为${row.license_number}的车?`, "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          //当用户点击确定按钮的时候会出发
          //向服务器发请求
          let result = await reqDeleteCar({ id: row._id });
          //如果删除成功
          if (result.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            if (this.shop_id) this.changeShop(this.shop_id);
          }
        })
        .catch(() => {
          //当用户点击取消按钮的时候会触发
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style></style>
